<ion-header [hidden]="showByLandscape">
  <ion-navbar>
    <ion-title>货币基金试算</ion-title>
    <ion-buttons end>
      <button ion-button (click)="moreOp()">操作</button>
    </ion-buttons>
  </ion-navbar>
  <!--<ion-item-divider id="headerDivider" color="light" class="setFontSize" (click)="setShowQueryCondition()">
    <ion-icon *ngIf="!showQueryCondition" name="add-circle" color="primary">&nbsp;</ion-icon>
    <ion-icon *ngIf="showQueryCondition" name="remove-circle" color="primary">&nbsp;</ion-icon>
    查询条件
  </ion-item-divider>-->
  <div id="headerDivider" class="item-inner setFontSize" (click)="setShowQueryCondition()">
    <div class="input-wrapper">
      <ion-label>&nbsp;
        <ion-icon *ngIf="!showQueryCondition" name="add-circle" color="primary">&nbsp;</ion-icon>
        <ion-icon *ngIf="showQueryCondition" name="remove-circle" color="primary">&nbsp;</ion-icon>
        查询条件&nbsp;<span *ngIf="queryCondition.fund_name">({{queryCondition.fund_name}})</span>
      </ion-label>
    </div>
  </div>
</ion-header>
<ion-content id="circulateContent" class="funds">
  <ion-list *ngIf="showQueryCondition">
    <ion-item class="fundCode">
      <!--<ion-label>基金代码：</ion-label>-->
      <!--<ion-input placeholder="基金代码"></ion-input>-->
      <ion-row>
        <ion-col width-25 class="fundCodetext">
          基金代码：
        </ion-col>
        <ion-col class="fundCodetext textEllipsis">
          {{queryCondition.fund_code}}
        </ion-col>
        <ion-col class="selectFundButton" col-2>
          <button ion-button small (click)="selectFund()">选择</button>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-item>
      <ion-label>试算日期：</ion-label>
      <ion-datetime displayFormat="YYYY-MM-DD" pickerFormat="YYYY-MM-DD" [(ngModel)]="queryCondition.l_begin_date"
                    cancelText="取消" doneText="确定">
      </ion-datetime>
    </ion-item>
    <ion-item class="queryParam">
      <ion-row>
        <ion-col>
          历史天数(天)：
        </ion-col>
      </ion-row>
      <ion-row class="RangeList">
        <ion-col width-25>
          <input [(ngModel)]="queryCondition.l_his_days" type="number"/>
        </ion-col>
        <ion-col>
          <ion-list>
            <ion-item>
              <ion-range [(ngModel)]="queryCondition.l_his_days" min="0" max="100" pin="false"></ion-range>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          试算天数(天)：
        </ion-col>
      </ion-row>
      <ion-row class="RangeList">
        <ion-col width-25>
          <input [(ngModel)]="queryCondition.l_fut_days" type="number"/>
        </ion-col>
        <ion-col>
          <ion-list>
            <ion-item>
              <ion-range [(ngModel)]="queryCondition.l_fut_days" min="1" max="100" pin="false"></ion-range>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-item>
      <ion-label>模拟情景</ion-label>
      <ion-select okText="完成" cancelText="取消" [(ngModel)]="queryCondition.simulatedScene">
        <ion-option *ngFor="let item of simulatedSceneList" value="{{item.l_plan_no}}">{{item.vc_plan_name}}</ion-option>
      </ion-select>
    </ion-item>
    <ion-item class="queryButton">
      <button ion-button color="primary" block (click)="search()">查询</button>
    </ion-item>
  </ion-list>

  <div class="tabSegmentDiv" *ngIf="!listData.noDatas">
    <ion-scroll id ="SegmentScroll" class="tabScroll" scrollX="true" style="height: 3.5rem;">
      <ion-segment [(ngModel)]="resultType" class="tabSegment" color="primary" (ionChange)="segmentChanged()">
        <ion-segment-button value="TrialCalculationResult">
          试算结果
        </ion-segment-button>
        <ion-segment-button value="SimulatedSceneList">
          模拟情景
        </ion-segment-button>
        <ion-segment-button value="StructuredFundTrialCalculationResult" [hidden]="listData.structuredFund.length <= 0">
          分级基金试算结果
        </ion-segment-button>
        <ion-segment-button value="PositionTrialCalculationResult">
          试算持仓分析
        </ion-segment-button>
      </ion-segment>
    </ion-scroll>
  </div>

  <div id="TrialCalculationResult" class="funds-detail-msg">
    <ion-row responsive-sm id="TrialCalculationResult_DataRow">
      <ion-col col-4 class="funds-left" id="TrialCalculationResult_ColLeft">
        <ion-list [hidden]="listData.trialCalculationResult.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p item-left>日期</p>
          </ion-item-divider>
          <div class="GridLeft" *ngFor="let result of listData.trialCalculationResult">
            <ion-item class="funds-name-item">
              <p item-left class="funds-name">
                <span class="funds-layout-flex GridFundName set-fund-name-color">
                  {{result.l_date}}
                </span>
              </p>
            </ion-item>
          </div>
        </ion-list>
      </ion-col>
      <ion-col col-8 class="funds-right" id="TrialCalculationResult_ColRight">
        <ion-list [hidden]="listData.trialCalculationResult.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="gridRight_TrialCalculationResult">
          <ion-scroll scrollX="true" class="item-wrap">
            <ion-item-divider id="GridTitle_TrialCalculationResult" class="fund-right-header">
              <p item-left class="odd_header" *ngFor="let col of listData.column">
                {{col.columnName}}
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let field of listData.trialCalculationResult">
                <ion-item>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p"
                     *ngFor="let colField of listData.column">
                    <span *ngIf="!colField.isNumber">{{field[colField.fieldName]}}</span>
                    <span *ngIf="colField.isNumber">{{field[colField.fieldName] | formatDataPipe: colField}}</span>
                  </p>
                </ion-item>
              </div>
            </div>

          </ion-scroll>
        </ion-list>
      </ion-col>
    </ion-row>
  </div>

  <div id="StructuredFundTrialCalculationResult" class="funds-detail-msg">
    <!--<ion-item>
      <ion-label>显示全部日期</ion-label>
      <ion-toggle [(ngModel)]="structuredFund_ShowAllDate" (ionChange)="showAllDateChange()"></ion-toggle>
    </ion-item>-->
    <ion-row responsive-sm id="StructuredFundTrialCalculationResult_DataRow">
      <ion-col col-4 class="funds-left" id="StructuredFundTrialCalculationResult_ColLeft">
        <ion-list [hidden]="listData.structuredFundTrialCalculationResult.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p item-left (click)="sortByField('l_date')">试算日期
              <ion-icon nam="md-arrow-dropup"
                        *ngIf="sortCondition.StructuredFundTrialCalculationResult.sortField === 'l_date'
                          && sortCondition.StructuredFundTrialCalculationResult.sortType==='up'"></ion-icon>
              <ion-icon nam="md-arrow-dropdown"
                        *ngIf="sortCondition.StructuredFundTrialCalculationResult.sortField === 'l_date'
                          && sortCondition.StructuredFundTrialCalculationResult.sortType==='down'"></ion-icon>
            </p>
          </ion-item-divider>
          <div class="GridLeft" *ngFor="let result of listData.structuredFundTrialCalculationResult">
            <ion-item class="funds-name-item" *ngIf="result.l_date === queryCondition.l_begin_date || structuredFund_ShowAllDate">
              <p item-left class="funds-name">
                <span class="funds-layout-flex GridFundName set-fund-name-color">
                  {{result.l_date}}
                </span>
              </p>
            </ion-item>
          </div>
        </ion-list>
      </ion-col>
      <ion-col col-8 class="funds-right" id="StructuredFundTrialCalculationResult_ColRight">
        <ion-list [hidden]="listData.structuredFundTrialCalculationResult.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="gridRight_StructuredFundTrialCalculationResult">
          <ion-scroll scrollX="true" class="item-wrap">
            <ion-item-divider id="GridTitle_StructuredFundTrialCalculationResult" class="fund-right-header">
              <p item-left class="odd_header" *ngFor="let col of listData.StructuredFundColumn">
                {{col.columnName}}
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let field of listData.structuredFundTrialCalculationResult">
                <ion-item *ngIf="field.l_date === queryCondition.l_begin_date || structuredFund_ShowAllDate">
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p"
                     *ngFor="let colField of listData.StructuredFundColumn">
                    <span *ngIf="!colField.isNumber">{{field[colField.fieldName]}}</span>
                    <span *ngIf="colField.isNumber">{{field[colField.fieldName] | formatDataPipe:colField}}</span>
                  </p>
                </ion-item>
              </div>
            </div>
          </ion-scroll>
        </ion-list>
      </ion-col>
    </ion-row>
  </div>

  <!--持仓分析-->
  <div id="PositionTrialCalculationResult" class="funds-detail-msg">
    <!--<ion-item>
      <ion-label>按到期日显示</ion-label>
      <ion-toggle [(ngModel)]="filterPositionCondition.showByMaturityDate" (ionChange)="showByMaturityDateChange()"></ion-toggle>
    </ion-item>-->
    <!--<ion-item>
      <button ion-button small block color="light" (click)="openFilterPositionModal()">数据过滤</button>
    </ion-item>-->
    <ion-list class='gfoa-list'>
      <ion-item-divider class='list-no-more-tips' color="light" [hidden]="requestLoading.positionTrial">数据加载中...</ion-item-divider>
    </ion-list> 
    <ion-row responsive-sm id="showByDetail">
      <ion-col col-6 class="position-funds-left" id="PositionTrialCalculationResult_ColLeft">
        <ion-list [hidden]="listData.positionTrialCalculationResult.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p style="text-align: center;">资产名称</p>
          </ion-item-divider>
          <div class="GridLeft" *ngFor="let position of listData.positionList">
            <ion-item class="funds-name-item" (click)="expandPosition(position)"
              *ngIf="position.data.length > 0">
              <p item-left class="funds-name">
                <ion-icon name="arrow-dropright" color="primary" *ngIf="!position.expand"></ion-icon>
                <ion-icon name="arrow-dropdown" color="primary" *ngIf="position.expand"></ion-icon>
                <span class="funds-layout-flex GridFundName set-fund-name-color">
                  {{position.name}}[合计:{{position.data.length}}]
                </span>
              </p>
            </ion-item>
            <div *ngIf="position.data.length > 0 && position.expand">
              <div *ngFor="let data of position.data">
                <ion-item class="funds-name-item" (click)="addToSimulateScene(position, data)">
                  <p item-left class="funds-name">
                    <span class="funds-layout-flex {{data.selectItemColor}}">
                      <span>{{data.vc_stock_no}}</span>
                    </span>
                  </p>
                </ion-item>
              </div>
            </div>
          </div>
        </ion-list>
      </ion-col>
      <ion-col col-6 class="position-funds-right" id="PositionTrialCalculationResult_ColRight">
        <ion-list [hidden]="listData.positionTrialCalculationResult.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="gridRight_PositionTrialCalculationResult">
          <ion-scroll scrollX="true" class="item-wrap">
            <ion-item-divider id="GridTitle_PositionTrialCalculationResult" class="fund-right-header">
              <p item-left class="odd_header" *ngFor="let col of listData.PositionColumn">
                {{col.columnName}}
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let pos of listData.positionList">
                <ion-item *ngIf="pos.data.length > 0" (click)="expandPosition(pos)">
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p"
                     *ngFor="let colField of listData.PositionColumn">
                    <span class="set-fund-name-color"
                          *ngIf="!colField.isNumber">{{pos.field[colField.fieldName]}}</span>
                    <span class="set-fund-name-color"
                          *ngIf="colField.isNumber">{{pos.field[colField.fieldName] | formatDataPipe:colField}}</span>
                  </p>
                </ion-item>
                <div *ngIf="pos.data.length > 0 && pos.expand">
                  <div *ngFor="let data of pos.data">
                    <ion-item (click)="addToSimulateScene(pos, data)">
                      <p item-left item-text class="funds-layout-flex set-bg-color {{data.selectItemColor}}"
                         *ngFor="let colField of listData.PositionColumn">
                        <span *ngIf="!colField.isNumber">{{data[colField.fieldName]}}</span>
                        <span *ngIf="colField.isNumber">{{data[colField.fieldName] | formatDataPipe:colField}}</span>
                      </p>
                    </ion-item>
                  </div>
                </div>
              </div>
            </div>
          </ion-scroll>
        </ion-list>
      </ion-col>
    </ion-row>

    <!--按到期日显示-->
    <ion-row responsive-sm id="showByMaturityDate">
      <ion-col col-6 class="position-funds-left" id="ShowByMaturityDate_ColLeft">
        <ion-list [hidden]="listData.positionTrialCalculationResult.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p item-left>资产名称</p>
          </ion-item-divider>
          <div class="GridLeft" *ngFor="let maturityDate of listData.maturityDateList">
            <ion-item class="funds-name-item" (click)="expandPosition(maturityDate)"
                      *ngIf="maturityDate.position.length > 0">
              <p item-left class="funds-name">
                <ion-icon name="arrow-dropright" color="primary" *ngIf="!maturityDate.expand"></ion-icon>
                <ion-icon name="arrow-dropdown" color="primary" *ngIf="maturityDate.expand"></ion-icon>
                <span class="funds-layout-flex GridFundName set-fund-name-color">
                  {{maturityDate.date}}[合计:{{maturityDate.total}}笔]</span>
              </p>
            </ion-item>
            <div *ngIf="maturityDate.position.length > 0 && maturityDate.expand">
              <div *ngFor="let pos of maturityDate.position">
                <ion-item class="funds-name-item" (click)="expandPosition(pos)">
                  <p item-left class="funds-name">
                    <ion-icon name="arrow-forward" *ngIf="!pos.expand"></ion-icon>
                    <ion-icon name="arrow-down" *ngIf="pos.expand"></ion-icon>
                    <span class="funds-layout-flex GridFundName">
                      <span>{{pos.name}}[合计:{{pos.data.length}}笔]</span>
                    </span>
                  </p>
                </ion-item>
                <div *ngIf="pos.expand">
                  <ion-item class="funds-name-item" *ngFor="let data of pos.data">
                    <p item-left class="funds-name">
                    <span class="funds-layout-flex">
                      <span class="grayColor">{{data.vc_stock_no}}</span>
                    </span>
                    </p>
                  </ion-item>
                </div>
              </div>
            </div>
          </div>
        </ion-list>
      </ion-col>
      <ion-col col-6 class="position-funds-right" id="ShowByMaturityDate_ColRight">
        <ion-list [hidden]="listData.positionTrialCalculationResult.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="gridRight_MaturityDateResult">
          <ion-scroll scrollX="true" class="item-wrap">
            <ion-item-divider id="GridTitle_MaturityDateResult" class="fund-right-header">
              <p item-left class="odd_header" *ngFor="let col of listData.MaturityColumn">
                {{col.columnName}}
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let maturityDate of listData.maturityDateList">
                <ion-item (click)="expandPosition(maturityDate)" *ngIf="maturityDate.position.length > 0">
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p"
                     *ngFor="let colField of listData.MaturityColumn">
                    <span class="set-fund-name-color"
                          *ngIf="!colField.isNumber">{{maturityDate.field[colField.fieldName]}}</span>
                    <span class="set-fund-name-color"
                          *ngIf="colField.isNumber">{{maturityDate.field[colField.fieldName] | formatDataPipe:colField}}</span>
                  </p>
                </ion-item>
                <div *ngIf="maturityDate.expand && maturityDate.position.length > 0">
                  <div *ngFor="let pos of maturityDate.position">
                    <ion-item>
                      <p item-left item-text class="funds-layout-flex set-bg-color"
                         *ngFor="let colField of listData.MaturityColumn">
                        <span *ngIf="!colField.isNumber">{{pos.field[colField.fieldName]}}</span>
                        <span *ngIf="colField.isNumber">{{pos.field[colField.fieldName] | formatDataPipe:colField}}</span>
                      </p>
                    </ion-item>
                    <div *ngIf="pos.expand">
                      <ion-item *ngFor="let data of pos.data">
                        <p item-left item-text class="funds-layout-flex set-bg-color"
                           *ngFor="let colField of listData.MaturityColumn">
                          <span *ngIf="!colField.isNumber">{{data[colField.fieldName]}}</span>
                          <span *ngIf="colField.isNumber">{{data[colField.fieldName] | formatDataPipe:colField}}</span>
                        </p>
                      </ion-item>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </ion-scroll>
        </ion-list>
      </ion-col>
    </ion-row>
  </div>

  <div id="SimulatedSceneList" class="funds-detail-msg">
    <ion-list class='gfoa-list'>
      <ion-item-divider class='list-no-more-tips' color="light" [hidden]="requestLoading.simulatedScene">数据加载中...</ion-item-divider>
    </ion-list> 
    <ion-row responsive-sm id="SimulatedSceneList_DataRow">
      <ion-col col-4 class="funds-left" id="SimulatedSceneList_ColLeft">
        <ion-list [hidden]="listData.simulatedScenePlan.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p item-left>流水生成日期</p>
          </ion-item-divider>
          <div class="GridLeft" *ngFor="let result of listData.simulatedScenePlan">
            <ion-item class="funds-name-item" (click)="simulatedScenePlanOps(result)">
              <p item-left class="funds-name">
                <span class="funds-layout-flex GridFundName set-fund-name-color">
                  {{result.l_date}}</span>
              </p>
            </ion-item>
          </div>
        </ion-list>
      </ion-col>
      <ion-col col-8 class="funds-right" id="SimulatedSceneList_ColRight">
        <ion-list [hidden]="listData.simulatedScenePlan.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="gridRight_SimulatedSceneList">
          <ion-scroll scrollX="true" class="item-wrap">
            <ion-item-divider id="GridTitle_SimulatedSceneList" class="fund-right-header">
              <p item-left class="odd_header" *ngFor="let col of listData.SimulatedSceneColumn">
                {{col.columnName}}
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let field of listData.simulatedScenePlan">
                <ion-item (click)="simulatedScenePlanOps(field)">
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p"
                     *ngFor="let colField of listData.SimulatedSceneColumn">
                    <span *ngIf="!colField.isNumber">{{field[colField.fieldName]}}</span>
                    <span *ngIf="colField.isNumber">{{field[colField.fieldName] | formatDataPipe: colField}}</span>
                  </p>
                </ion-item>
              </div>
            </div>

          </ion-scroll>
        </ion-list>
      </ion-col>
    </ion-row>
  </div>
  <!--<ion-list class='gfoa-list' *ngIf="resultType === 'TrialCalculationResult'">
    <ion-item-divider class='list-no-more-tips' color="light" [hidden]="isLoadMore">暂无更多数据...</ion-item-divider>

  </ion-list>-->
</ion-content>
<div id="exitFullscreen" class="exitFullscreen" *ngIf="showByLandscape" (click)="setShowByLandscape(1)">
  <!--<ion-icon name="contract"></ion-icon>-->
  <!--<img src="assets/img/common/exitFullScreen.png" />-->
  <span>取消全屏</span>
</div>
<div class="enterFullscreen" *ngIf="!showByLandscape" (click)="setShowByLandscape(1)" [hidden]="listData.noDatas">
  <span>全屏显示</span>
</div>
